<template>
  <div class="form-config-container">
    <ElForm label-position="top">
      <ElFormItem label="是否显示顶部导航栏">
        <ElRadioGroup v-model="data.show">
          <ElRadio :label="true">是</ElRadio>
          <ElRadio :label="false">否</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="导航栏标题">
        <ElInput v-model.number="data.title" />
      </ElFormItem>
      <ElTabs v-model="activeTab" class="phone-header-tab">
        <ElTabPane label="返回按钮配置" name="left">
          <ElFormItem label="名称">
            <ElInput v-model.number="data.leftBtnTitle" />
          </ElFormItem>
          <ElFormItem label="控件类型" style="display: flex; flex-direction: column">
            <ElSelect v-model="data.leftBtnMode" style="flex: 1">
              <ElOption
                v-for="item in phoneLeftButtonType"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="绑定事件">
            <ElInput v-model.number="data.leftEvent" />
          </ElFormItem>
        </ElTabPane>
        <ElTabPane label="提交按钮配置" name="right">
          <ElFormItem label="控件属性">
            <ElCheckbox v-model="data.rightBtnConfig.element_permissions" label="开启权限" />
          </ElFormItem>
          <ElFormItem label="是否可验证">
            <ElSwitch
              inline-prompt
              active-text="是"
              inactive-text="否"
              v-model="data.rightBtnConfig.element_enableThe"
              @change="handleEnableTheChange"
            />
          </ElFormItem>
          <ElFormItem label="验证错误提示" v-if="data.rightBtnConfig.element_enableThe">
            <ElInput v-model="data.rightBtnConfig.element_validationError" />
          </ElFormItem>
          <ElFormItem label="名称">
            <ElInput v-model.number="data.rightBtnConfig.element_title" />
          </ElFormItem>
          <ElFormItem label="控件类型" style="display: flex; flex-direction: column">
            <ElSelect v-model="data.rightBtnConfig.element_mode" style="flex: 1">
              <ElOption
                v-for="item in phoneRightButtonType"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="绑定事件">
            <ElInput v-model.number="data.rightBtnConfig.element_event" />
          </ElFormItem>
          <ElFormItem label="完成类型">
            <ElSelect v-model="data.rightBtnConfig.element_close">
              <ElOption
                v-for="item in saveType"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                :disabled="item.hidden"
              />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="指定表单">
            <ElInput v-model="data.rightBtnConfig.element_Theunit" />
          </ElFormItem>
          <ElFormItem label="表单验证SQL编号">
            <ElInput v-model="data.rightBtnConfig.element_sqlFormCode" />
          </ElFormItem>
          <ElFormItem label="关联子表字段">
            <ElInput v-model="data.rightBtnConfig.element_subtablefields" />
          </ElFormItem>
          <ElFormItem label="指定列表">
            <ElInput v-model="data.rightBtnConfig.element_Thelist" />
          </ElFormItem>
          <ElFormItem label="列表验证SQL编号">
            <ElInput v-model="data.rightBtnConfig.element_sqlListCode" />
          </ElFormItem>
          <ElFormItem label="Action">
            <ElInput v-model="data.rightBtnConfig.element_action" />
          </ElFormItem>

          <ElFormItem label="Js前置回调">
            <ElButton style="width: 100%" @click="handlClickJsFront('element_jsFront')"
              >设置</ElButton
            >
          </ElFormItem>
          <ElFormItem label="Js成功回调">
            <ElButton style="width: 100%" @click="handlClickJsFront('element_jsCallback')"
              >设置</ElButton
            >
          </ElFormItem>
          <ElFormItem label="Js失败回调">
            <ElButton style="width: 100%" @click="handlClickJsFront('element_jsfailCallback')"
              >设置</ElButton
            >
          </ElFormItem>
          <ElFormItem label="Js错误回调">
            <ElButton style="width: 100%" @click="handlClickJsFront('element_jserrorCallback')"
              >设置</ElButton
            >
          </ElFormItem>
        </ElTabPane>
      </ElTabs>
    </ElForm>
    <ElDialog
      :model-value="JsPre"
      title="设置"
      :before-close="handleCloseFront"
      :destroy-on-close="true"
    >
      <WebEditor
        v-model="JsModel"
        :language="language"
        width="100%"
        height="500px"
        @change="hanldUpdateWebJsFront"
      />
    </ElDialog>
  </div>
</template>

<script lang="ts">
  import {
    WidgetFormType,
    phoneLeftButtonType,
    phoneRightButtonType,
    saveType,
  } from '@/types/element';
  import { PropType } from 'vue';

  export default defineComponent({
    name: 'FormConfig',
    props: {
      phoneHeaderConfig: {
        type: Object as PropType<WidgetFormType['phoneHeaderConfig']>,
        required: true,
      },
      json: {
        type: Object,
      },
    },
    emits: ['update:phoneHeaderConfig'],
    setup(props, context) {
      const activeTab = ref<string>('left');
      const JsName = ref<string>();
      const language = ref<string>();
      const JsModel = ref<string>();
      const JsPre = ref<boolean>(false);
      const data = ref(props.phoneHeaderConfig);
      watch(data, () => context.emit('update:phoneHeaderConfig', data));
      const hasKey = (key: string) => Object.keys(data.value).includes(key);
      const handleEnableTheChange = (value: boolean) => {
        if (!value) {
          delete data.value.rightBtnConfig.element_validationError;
        } else {
          data.value.rightBtnConfig.element_validationError = '';
        }
      };
      // 显示弹出层
      const handlClickJsFront = async (value: string) => {
        JsName.value = value;
        if (value === 'element_custom') {
          language.value = 'html';
        } else {
          language.value = 'javascript';
        }
        switch (value) {
          case 'element_jsFront':
            JsModel.value = data.value.rightBtnConfig.element_jsFront;
            break;
          case 'element_jsCallback':
            JsModel.value = data.value.rightBtnConfig.element_jsCallback;
            break;
          case 'element_jsfailCallback':
            JsModel.value = data.value.rightBtnConfig.element_jsfailCallback;
            break;
          case 'element_jserrorCallback':
            JsModel.value = data.value.rightBtnConfig.element_jserrorCallback;
            break;
        }
        JsPre.value = !JsPre.value;
      };
      // 编辑器返回值
      const hanldUpdateWebJsFront = async (value: any) => {
        switch (JsName.value) {
          case 'element_jsFront':
            data.value.rightBtnConfig.element_jsFront = value;
            break;
          case 'element_jsCallback':
            data.value.rightBtnConfig.element_jsCallback = value;
            break;
          case 'element_jsfailCallback':
            data.value.rightBtnConfig.element_jsfailCallback = value;
            break;
          case 'element_jserrorCallback':
            data.value.rightBtnConfig.element_jserrorCallback = value;
            break;
        }
      };
      // 关闭弹出层
      const handleCloseFront = async () => {
        JsPre.value = !JsPre.value;
      };
      return {
        data,
        phoneLeftButtonType,
        phoneRightButtonType,
        hasKey,
        saveType,
        activeTab,
        handleEnableTheChange,
        JsPre,
        language,
        JsModel,
        handlClickJsFront,
        handleCloseFront,
        hanldUpdateWebJsFront,
      };
    },
  });
</script>

<style lang="scss" scoped>
  :deep(.el-radio-button__inner) {
    padding: 8px 13px;
  }
  :deep(.phone-header-tab) {
    .el-tabs__nav-scroll {
      padding-left: 0 !important;
      .el-tabs__item {
        padding: 0 10px !important;
        &:hover {
          color: #2c3e50;
        }
      }
      .is-active {
        border-bottom: 2px solid var(--el-color-primary);
        color: #2c3e50;
      }

      .el-tabs__active-bar {
        height: 0;
      }
    }
    .el-tabs__content {
      padding-top: 10px;
    }
  }
</style>
